<template>
    <div class="container backImg">
        <div class="mb150">
            <div class="community-div">
                <div class="community-top" style="background-color: #F16910">
                    <Icon type="md-person-add"/>
                    <span class="title">社区人员录入</span></div>
                <div class="community-bottom">
                  <Row>
                    <Col span="6" class="hand">
                        <div class="community-add" @click="addPerson('add', '1')">
                            <div class="community-left">
                                <img :src="wh1" alt="" class="icon-img">
                            </div>
                            <div class="community-right">
                                <span>+ 湖北武汉</span>
                            </div>
                        </div>
                    </Col>
                    <Col span="6" class="hand">
                        <div class="community-add" @click="addPerson('add', '2')">
                            <div class="community-left">
                                <img :src="hb1" alt="" class="icon-img">
                            </div>
                            <div class="community-right">
                                <span>+ 湖北其他城市</span>
                            </div>
                        </div>
                    </Col>
                    <Col span="6" class="hand">
                        <div class="community-add" @click="addPerson('add', '3')">
                            <div class="community-left">
                                <img :src="qt1" alt="" class="icon-img">
                            </div>
                            <div class="community-right">
                                <span>+ 其他省市</span>
                            </div>
                        </div>
                    </Col>
                    <Col span="6" class="hand">
                        <div class="community-add" @click="addPerson('add', '5')">
                            <div class="community-left">
                                <img :src="hx1" alt="" class="icon-img">
                            </div>
                            <div class="community-right">
                                <span>+ 浙江温州</span>
                            </div>
                        </div>
                    </Col>
                  </Row>
                </div>
            </div>
            <div class="community-div1">
                <div class="community-top" style="background-color: #F2C806">
                    <Icon type="md-person-add"/>
                    <span class="title">农村人员录入</span></div>
                <div class="community-bottom">
                  <Row>
                    <Col span="6" class="hand">
                        <div class="community-add2" @click="addPerson('add', '1')">
                            <div class="community-left">
                                <img :src="wh2" alt="" class="icon-img">
                            </div>
                            <div class="community-right">
                                <span>+ 湖北武汉</span>
                            </div>
                        </div>
                    </Col>
                    <Col span="6" class="hand">
                        <div class="community-add2" @click="addPerson('add', '2')">
                            <div class="community-left">
                                <img :src="hb2" alt="" class="icon-img">
                            </div>
                            <div class="community-right">
                                <span>+ 湖北其他城市</span>
                            </div>
                        </div>
                    </Col>
                    <Col span="6" class="hand">
                        <div class="community-add2">
                            <div class="community-left" @click="addPerson('add', '3')">
                                <img :src="qt2" alt="" class="icon-img">
                            </div>
                            <div class="community-right">
                                <span>+ 其他省市</span>
                            </div>
                        </div>
                    </Col>
                    <Col span="6" class="hand">
                        <div class="community-add2" @click="addPerson('add', '5')">
                            <div class="community-left">
                                <img :src="hx2" alt="" class="icon-img">
                            </div>
                            <div class="community-right">
                                <span>+ 浙江温州</span>
                            </div>
                        </div>
                    </Col>
                  </Row>
                </div>
            </div>
            <div class="community-div1">
                <div class="community-top" style="background-color: #6A0409">
                  <Row>
                    <Icon type="ios-menu"/>
                    <span class="title">其他功能</span>
                  </Row>
                  </div>
                <div class="community-bottom">
                    <div class="community-add1 hand" @click="skip('list')">
                        <div class="community-left">
                            <img :src="rylb" alt="" class="icon-img">
                        </div>
                        <div class="community-right">
                            <span>+ 人员列表</span>
                        </div>
                    </div>
                    <div class="community-add1 hand" @click="band()">
                        <div class="community-left">
                            <img :src="phone" alt="" class="icon-img">
                        </div>
                        <div class="community-right">
                            <span>+ 手机端统计</span>
                        </div>
                    </div>
                    <div class="community-add1 hand" @click="skip('statistics')">
                        <div class="community-left">
                            <img :src="tjfx" alt="" class="icon-img">
                        </div>
                        <div class="community-right">
                            <span>+ 统计分析</span>
                        </div>
                    </div>
                    <div class="community-add1 hand" @click="skip('list', '1')">
                        <div class="community-left">
                            <img :src="fryj" alt="" class="icon-img">
                        </div>
                        <div class="community-right">
                            <span>+ 发热预警</span>
                        </div>
                    </div>
                    <div class="community-add1 hand" @click="skip('list', '2')">
                        <div class="community-left">
                            <img :src="sjfx" alt="" class="icon-img">
                        </div>
                        <div class="community-right">
                            <span>+ 数据导出</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <Modal v-model="modal1" title="扫描二维码" @on-ok="ok()" @on-cancel="cancel" width="400px">
          <div style="margin-left: 50px">
            <img src="../../../assets/images/statistics-mobile.png" alt="">
          </div>
      </Modal>
    </div>
</template>

<script>
// import { userlist, updateuserinfo, delbyid, updateusercompanycode } from '@/api/yi-qing-fang-kong'
// import { grid_downlist, getUserByMZList } from '@/api/eventlist'
import yqbg from '@/assets/images/yqbg.png'
import wh1 from '@/assets/images/武汉 拷贝 2@2x.png'
import wh2 from '@/assets/images/武汉 拷贝 3@2x.png'
import hb1 from '@/assets/images/湖北 拷贝 2@2x.png'
import hb2 from '@/assets/images/湖北 拷贝 3@2x.png'
import qt1 from '@/assets/images/其他 拷贝 2@2x.png'
import qt2 from '@/assets/images/其他 拷贝 3@2x.png'
import hx1 from '@/assets/images/图层 3 拷贝 2@2x.png'
import hx2 from '@/assets/images/图层 3 拷贝 3@2x.png'
import rylb from '@/assets/images/图层 5 拷贝@2x.png'
import phone from '@/assets/images/图层 6 拷贝@2x.png'
import tjfx from '@/assets/images/图层 7 拷贝@2x.png'
import fryj from '@/assets/images/图层 8 拷贝@2x.png'
import sjfx from '@/assets/images/图层 9 拷贝@2x.png'

export default {
  name: 'add-buttons',
  data () {
    return {
      modal1: false,
      yqbg,
      wh1,
      wh2,
      hb1,
      hb2,
      qt1,
      qt2,
      hx1,
      hx2,
      rylb,
      phone,
      tjfx,
      fryj,
      sjfx
    }
  },
  computed: {
    companyCode () {
      return this.$store.state.user.severUserInfo.company_code
    }
  },
  methods: {
    addPerson (what, arrive_address_type) {
      this.$router.push({
        path: '/yi-qing/add',
        query: { id: '', what: what, arrive_address_type: arrive_address_type }
      })
    },
    skip (path, type) {
      this.$router.push({ path: '/yi-qing/' + path, query: { type: type } })
    },
    band () {
      this.modal1 = true
    },
    cancel () {
      this.modal1 = false
    }
  },
  mounted () {
  }
}
</script>

<style scoped>
    .page_style {
        margin: 20px 5px;
    }

    .input-frame {
        width: 120px;
        margin-right: 10px;
    }

    .house-list > .group {
        background: white;
        padding: 10px;
        margin-top: 10px;
    }

    .house-list > .group > .item {
        border-bottom: 1px solid #f5f5f5;
        padding: 10px 0;
    }

    .house-list > .group > .item .top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
    }

    .house-list > .group > .item .title {
        font-size: 14px;
        color: #333333;
    }

    .house-list > .group > .item .address {
        font-size: 12px;
        color: gray;
        display: flex;
        align-items: center;
    }

    .house-list > .group > .item .detail {
        font-size: 12px;
        color: dodgerblue;
    }

    .opt-area-02 {
        display: flex;
        align-items: center;
        flex-direction: column;
        border: 1px solid #abdcff;
        background-color: #f0faff;
        padding: 8px 16px 8px 16px;
        border-radius: 4px;
        margin-bottom: 10px;
    }

    .opt-area-02 .right-con {
        width: 100%;
        margin-top: 5px;
        display: flex;
    }

    .opt-area-02 .left-con {
        font-size: 14px;
        width: 100%;
    }

    .opt-area-02 .left-con span {
        font-weight: bold;
    }

    .opt-area-02 .right-con input {
        width: 150px;
        margin-right: 10px;
    }

    .opt-area-02 .right-con .input-frame {
        width: 200px;
        margin-right: 10px;
    }

    .table-action-btn {
        margin-right: 3px;
    }

    .container {
        font-weight: bold;
    }

    .container >>> .ivu-btn-small {
        height: 24px;
        padding: 0 5px;
        font-size: 12px;
        border-radius: 3px;
    }

    .btn-action {
        margin-bottom: 10px;
    }

    .mp10 {
        margin-right: 10px;
    }

    .community-div {
        margin-bottom: 30px;
        /*background: url( yqbg );*/
    }

    .community-div1 {
        margin-bottom: 30px;
    }

    .community-top {
        height: 40px;
        padding-left: 13px;
        color: white;
    }

    .community-bottom {
        background-color: #961017;
        height: 120px;
    }

    .community-bottom .community-add {
        height: 100px;
        width: 90%;
        margin-left: 20px;
        margin-top: 10px;
        background-color: #cb4612;
        /*opacity: 0.5;*/
        float: left;
    }

    .community-bottom .community-add1 {
        height: 100px;
        width: 18%;
        margin-left: 19px;
        margin-right: 5px;
        margin-top: 10px;
        background-color: #8e080f;
        /*opacity: 0.65;*/
        float: left;
    }

    .community-bottom .community-add2 {
        height: 100px;
        width: 90%;
        margin-left: 18px;
        margin-top: 10px;
        background-color: #d79307;
        /*opacity: 0.65;*/
        float: left;
    }

    .community-bottom .community-add1 .community-left {
        width: 40%;
        float: left;
        line-height: 100px;
        height: 100px;
        text-align: center;
    }

    .community-left {
        width: 35%;
        float: left;
        line-height: 100px;
        height: 100px;
        text-align: center;
    }

    .community-right {
        width: 60%;
        float: left;
        font-size: 1.4rem;
        color: white;
        line-height: 100px;
    }

    .icon-img {
        width: 70px;
        height: 70px;
    }

    .title {
        color: white;
        font-size: 0.9rem;
        line-height: 40px;
    }

    .backImg {
        width: 100%;
        height: 100%;
        background-image: url('../../../assets/images/yqbg.png');
        background-size: 100% 100%;
        background-position: center;
        position: relative;
    }

    .mb150 {
        top: 150px;
        position: relative;
    }
    .hand{
        cursor: pointer;
    }
</style>
